
<template>
    <div id="lineChat" class="overflow-x-auto w-full h-60"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import {onMounted,watch} from "vue";

// 对外暴露的属性值
const props = defineProps({
  value: { // 属性值名称
    type: Object, // 类型为对象
    default: null // 默认为 null
  }
})


function initLineChat(){
  var charDom = document.getElementById('lineChat');
  var myChart = echarts.init(charDom);
  var option;

  const pvDates = props.value.pvDates
  const pvCounts =props.value.pvCounts

  option = {
    xAxis: {
      type: 'category',
      data: pvDates // x 轴数据
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: pvCounts, // 设置 pv 访问量
        type: 'line'
      }
    ]
  }

  // 移动到折点上，显示数值
  option.tooltip = { trigger: 'axis'};

  option && myChart.setOption(option);
}
// 侦听属性, 监听 props.value 的变化，一旦 props.value 发生变化，就调用 initLineChat 初始化折线图

watch(()=>props.value, () => initLineChat())

</script>

<style scoped>

</style>
